<template>
	<view class="detail_container">
		<view class="detail_title">文章知识点与官方知识档案匹配，可进一步学习相关知识</view>
		<view class="detail_info">
			<view class="_cell">
				<i class="iconfont icon-yanjing"></i>
				<text>533</text>
			</view>
			<view class="_cell">
				<i class="iconfont icon-liuyan"></i>
				<text>533</text>
			</view>
			<view class="_cell">
				<i class="iconfont icon-dianzan"></i>
				<text>533</text>
			</view>
		</view>
		
		<view class="user_info">
			<image class="_head" src="https://img1.baidu.com/it/u=1097077603,238359071&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image>
			<view class="_content">
				<view class="_name">尼古拉斯赵四</view>
				<view class="_info">
					<text class="_u">创作</text>
					<text class="_n">20</text>
					<text class="_u">粉丝</text>
					<text class="_n">6222</text>
				</view>
			</view>
		</view>
		
		<view class="works_item" v-for="(item,index) in 6" :key="index">
			<image class="_img" mode="aspectFill" src="https://img2.baidu.com/it/u=4134404395,864195599&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"></image>
		</view>
		
		<!-- 底部 -->
		<view class="work_footer">
			<view class="_left" @click="commitVisChange">
				<i class="iconfont icon-liuyan"></i>
			</view>
			
			<view class="_right">
				<i class="iconfont icon-dianzan"></i>
			</view>
		</view>
		
		<!-- 评论列表 -->
		<u-popup
			:show="commitVisible"
			:round="10" 
			mode="bottom"
			closeOnClickOverlay
			closeable
			:safeAreaInsetBottom="false"
			@close="commitVisChange"
		>
			<view class="commit_container" id="container">
				
				<view class="commit_title">全部评论</view>
				
				<scroll-view
					:style="{height: scorllHeight+'px'}"
					scroll-y
				>
					<view class="comment_content">
						<view class="_item" v-for="(item, index) in 0" :key="index">
							<image class="_head" src="https://img1.baidu.com/it/u=1097077603,238359071&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="aspectFill"></image>
							<view class="_right">
								<view class="_name">
									<text>尼古拉斯赵四</text>
									<text class="_time">2022-10-22</text>
								</view>
								<view class="_content">画的真好看，很逼真</view>
							</view>
						</view>
					</view>
					
					<!-- 暂无数据 -->
					<u-empty mode="message" v-if="true" text="暂无评论"/>
				</scroll-view>
			</view>
			
			<view class="chat_footer" id="chatFooter">
				<view class="input_main">
					<textarea
						class="_textarea"
						type="text"
						cursor-spacing="65"
						confirm-type='done'
						v-model="commentContent"
						@confirm="submitFn"
						auto-height
						:show-confirm-bar='false'
						maxlength="-1"></textarea>
					<button class="_send_btn" @tap="submitFn">发送</button>
				</view>
			</view>
			
		</u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commitVisible: false, 
				scorllHeight: 0,
				commentContent: '',
				sysInfo: {}
			}
		},
		watch: {
			commentContent() {
				// 监听文字变化，计算scroll-view的高度，加setTimeout是为了解决textarea高度变化的延迟
				setTimeout(()=>{
					this.$u.throttle(this.clacScrollHeight)
				},30)
			}
		},
		onLoad() {
			uni.getSystemInfo().then(res=>{
				this.sysInfo = res
				console.log(this.sysInfo);
			});
		},
		methods: {
			commitVisChange() {
				this.commitVisible = !this.commitVisible;
				if(this.commitVisible){
					this.$nextTick(()=>{
						this.clacScrollHeight();
					})
				}
			},
			// 计算评论列表的高度
			clacScrollHeight() {
				let query = uni.createSelectorQuery().in(this)
				query.select('#container').boundingClientRect()
				query.select('#chatFooter').boundingClientRect()
				query.exec((res) => {
					this.scorllHeight = res[0].height - 50 - res[1].height;
				})
			},
			
			// 提交
			submitFn() {
				console.log('tijiao');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.detail_container{
		padding: 30rpx;
		background-color: #fff;
	}
	.detail_title{
		font-size: 35rpx;
		font-weight: bold;
		margin-bottom: 20rpx
	}
	.detail_info{
		color: #777;
		margin-bottom: 40rpx;
		display: flex;
		._cell{
			display: flex;
			align-items: center;
			margin-right: 60rpx;
			&:last-child{
				margin-right: 0;
			}
			.iconfont{
				margin-right: 6rpx;
			}
		}
	}
	.user_info{
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		._head{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
		._content{
			flex: 1;
			._name{
				font-weight: bold;
				margin-bottom: 6rpx;
			}
			._info{
				display: flex;
				align-items: center;
				._u{
					color: #888;
					font-size: 24rpx;
				}
				._n{
					margin: 0 30rpx 0 6rpx;
				}
			}
		}
	}
	
	.works_item{
		position: relative;
		margin-bottom: 30rpx;
		box-shadow: 0 0 30rpx rgba(0,0,0,0.2);
		._img{
			width: 100%;
			height: 400rpx;
			display: block;
		}
	}
	
	.work_footer{
		position: fixed;
		bottom: 60rpx;
		left: 30rpx;
		right: 30rpx;
		display: flex;
		justify-content: space-between;
		z-index: 3;
		._left, ._right{
			width: 180rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #666;
			border-radius: 60rpx;
			background-color: #fff;
			.iconfont{
				font-size: 50rpx;
			}
		}
	}
	
	.commit_title{
		font-weight: bold;
		font-size: 38rpx;
		text-align: center;
		line-height: 50px;
	}
	.commit_container{
		height: 64vh;
	}
	.comment_content{
		position: relative;
		padding: 30rpx 0 20rpx 0;
		._item{
			margin-bottom: 45rpx;
			display: flex;
			padding: 0 30rpx;
		}
		._head{
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		._right{
			flex: 1;
		}
		._name{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;
			._time{
				color: #aaa;
				font-size: 24rpx;
			}
		}
	}
	.chat_footer{
		width: 100%;
		height: auto;
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 1;
		background-color: #FFFFFF;
		.input_main{
			min-height: 50px;
			display: flex;
			align-items: center;
			background-color: #f2f2f2;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			._textarea{
				width: 100%;
				font-size: 14px;
				padding: 0 10px;
				display: inline-block;
				margin: 10rpx 10rpx 10rpx 20rpx;
				line-height: 48rpx;
				position: relative;
				top: 0;
				background-color: #fff;
				border-radius: 16px;
				flex: 1;
				max-height: 200rpx;
				min-height: 60rpx;
			}
			._send_btn{
				font-size: 10px;
				background-color: $u-primary;
				color: #fff;
				margin-right: 10px;
				margin-left: 20rpx;
			}
		}
	}
</style>